<template>
	<view>
		<u-sticky bgColor="#ffffff">
			<u-tabs :list="tabList" @click="change" :scrollable="false" lineWidth="50rpx" keyName="title"
				lineColor="rgba(1, 185, 1, 1)" :activeStyle="{
			  color: '#000000',
			  fontWeight: 800,
			  transform: 'scale(1.05)'}" :inactiveStyle="{
			  color: '#666666',
			     fontWeight: 800,
			    transform: 'scale(1)'
			}" itemStyle="padding-left: 5px; padding-right: 5px; height: 44px;"></u-tabs>
		</u-sticky>
		<view class="textcenter titletext hei_text bold margin_top1">點選下列付款方式 並查看帳號資訉 </view>
		<view class="textcenter titletext hei_text bold margin_top1">系統將自動複製帳號</view>
		<view class="textcenter titletext hei_text bold margin_top1">您只需填寫銀行代號及付款金額進行付款</view>
		<view class="mainpadding" >
			<template  v-if="tabs==1 || tabs==''">
				<view class="titletext textcenter huang_text bold" style="font-size: 45rpx;color: #01b901;">轉帳</view>
				<view class="payimg margin_top4" @click="seletitem(item)" v-for="item in dataList[0]" :key="item.id">
					<image :src="item.image" mode=""></image>
				</view>
			</template>
			<template v-if="tabs==2 || tabs==''">
				<view class="titletext textcenter huang_text bold margin_top"  style="font-size: 45rpx;color: #01b901;">行動支付</view>
				<view class="payimg margin_top4" @click="xingdongzf(item)" v-for="item in dataList[1]" :key="item.id">
					<image :src="item.image" mode=""></image>
				</view>
			</template>
			<!-- 这是之前的逻辑现在不用了（可线上支付也可二维码跳转链接支付） -->
			<template  v-if="tabs==9">
				<view class="titletext textcenter huang_text bold margin_top"  style="font-size: 45rpx;color: #01b901;">行動支付</view>
				<!-- 全支付 -->
				<template v-if="shopInfo.allpay_status==1">
					<view class="payimg margin_top4" @click="xdzfpay(1)">
						<image :src="imgall.allpay_image" mode=""></image>
					</view>
				</template>
				<!-- icash支付 -->
				<template v-if="shopInfo.icash_status==1">
					<view class="payimg margin_top4" @click="xdzfpay(2)">
						<image :src="imgall.icash_image" mode=""></image>
					</view>
				</template>
				<!-- 悠悠支付 -->
				<template v-if="shopInfo.yypay_status==1">
					<view class="payimg margin_top4" @click="xdzfpay(3)">
						<image :src="imgall.yypay_image" mode=""></image>
					</view>
				</template>
				<!-- 街口支付 -->
				<template v-if="shopInfo.jkpay_status==1">
					<view class="payimg margin_top4" @click="xdzfpay(4)">
						<image :src="imgall.jkpay_image" mode=""></image>
					</view>
				</template>
				<!-- line支付 -->
				<template v-if="shopInfo.linepay_status==1">
					<view class="payimg margin_top4" @click="xdzfpay(5)">
						<image :src="imgall.linepay_image" mode=""></image>
					</view>
				</template>
			</template>
			<template  v-if="tabs==3 || tabs==''">
				<view class="titletext textcenter huang_text bold margin_top" style="font-size: 45rpx;color: #01b901;">信用卡</view>
				<view class="payimg margin_top4" @click="seletitem(item)" v-for="item in dataList[2]" :key="item.id">
					<image :src="item.image" mode=""></image>
				</view>
			</template>
			<template  v-if="tabs==4 || tabs==''">
				<view class="titletext textcenter huang_text bold margin_top" style="font-size: 45rpx;color: #01b901;">超商繳費</view>
				<view class="payimg margin_top4" @click="seletitem(item)" v-for="item in dataList[3]" :key="item.id">
					<image :src="item.image" mode=""></image>
				</view>
			</template>
		</view>
		<u-popup :show="show" @close="show=false" :round="10" mode="center">
			<view class="" style="min-width: 700rpx;">
				<view class="topbgc textcenter mainpadding xiaobai titletext bold">{{currentitem.name}}</view>
				<view class="textcenter titletext hei_text bold margin_top5">帳號已複製</view>
				<view class="textcenter titletext hei_text bold margin_top">{{currentitem.zh}}</view>
				<view class="textcenter titletext hei_text bold margin_top5">確認後系統會自動轉向App</view>
				<view class="textcenter titletext hei_text bold margin_top">可貼上帳號自動填入金額付款</view>
				<view class="mainpadding flexbetween margin_top5">
					<view class="submitbtn xiaobai main_size bold margin_right6" style="background-color: #999;"
						@click="show=false">重新選擇</view>
					<view class="submitbtn" style="background-color: #01b901;color: #fff;" @click="confirm">確認</view>
				</view>
			</view>
		</u-popup>
		<u-modal :show="pzshow" title="上傳憑證" confirmColor="#ffb800" confirmText="確認" @confirm="upconfirm"
			cancelText="取消" @cancel="pzshow=false" showCancelButton>
			<view class="slot-content" style="width: 730rpx;">
				<view class="flexcenter">
					<view class="itemimgBox flexcenter margin_top2" v-for="(item,index) in images_text" :key="index">
						<!-- 已上傳 -->
						<view class="listleftimg1 radius">
							<image class="radius" :src="item" mode=""></image>
							<view class="deleteimg" @click="delindex(index,images,images_text)"></view>
						</view>
					</view>
					<view class="itemimgBox flexcenter margin_top2" @click="uploadImg(1,images,images_text)"
						v-if="images.length<1"><!-- 未上傳 -->
						<image class="listleftimg1 radius" src="@/static/images/mine/noImage.png" mode=""></image>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: "",
				tabList: [{
					title: "全部",
					id:"" ,
				},{
					title: "行動支付",
					id: 2,
				},{
					title: "轉帳",
					id: 1,
				}, {
					title: "信用卡",
					id: 3,
				}, {
					title: "超商繳費",
					id: 4,
				}],
				show: false,
				dataList: [],
				shop_id: "",
				currentitem: {
					name: "",
					zh: ""
				},
				price:"",//充值的金额
				shopInfo:{},
				imgall:{},
				listid:"",
				images: [],
				images_text: [],
				pzshow: false,
				uppzflag: 2, //2呼叫訂單定金上傳，4呼叫訂單尾款上傳
			}
		},
		onLoad(options) {
			this.type = options.type
			if(options.shop_id){
				this.shop_id = options.shop_id
			}
			if(options.price){
				this.price = options.price
			}
			if(options.id){
				this.listid = options.id
			}
			this.getshopInfo()
		},
		onShow() {
			if(this.type==3){//如果type=3呼叫訂單付訂金/尾款
				this.getInfo()
			}
			this.init()
			this.getzfimg()
		},
		methods: {
			uploadImg(value, upImgs, upImgs_text) { //上傳圖片
				let _this = this;
				let num = Number(value) - upImgs.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['照機', '相簿'],
					success: function(res) {
						// 選擇照機走0
						if (res.tapIndex == 0) {
							_this.http.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
						// 選擇相簿走1
						if (res.tapIndex == 1) {
							_this.http.chooseImage(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			delindex(index, upImg, upImgs_text) {
				upImg.splice(index, 1)
				upImgs_text.splice(index, 1)
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				this.http.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					upImg.push(res.url)
					upImgs_text.push(image_item);
				}).catch(err => {});
			},
			upconfirm() {
				if (this.images.length == 0) {
					this.http.toast("請上傳圖片")
				}
				this.pzshow = false
				let url = ""
				let data = {}
				if (this.uppzflag == 2) { //呼叫訂單定金上傳憑證
					url = "/api/Ordercall/updateOrderImage"
					data = {
						id: this.listid,
						image: this.images.join()
					}
				}
				if (this.uppzflag == 4) { //呼叫訂單尾款上傳憑證
					url = "/api/Ordercall/updateOrderImage"
					data = {
						id: this.listid,
						image1: this.images.join()
					}
				}
				this.http.request(url, 'GET', data).then(res => {
					this.http.toast(res.msg);
					if (res.code == 1) {
						this.images = []
						this.images_text = []
						uni.switchTab({
							url:"/pages/order/order"
						})
					}
				}).catch(err => {
					this.http.toast(err.msg);
				})
			},
			getInfo() { //訂單詳情
				this.http.request('/api/ordercall/deailOrdermake', 'POST', {
					id: this.listid,
				}).then(res=>{
					if(res.data.status==87){//付定金
						this.uppzflag = 2
					}
					if(res.data.status==4){//付尾款
						this.uppzflag = 4
					}
				})
			},
			xdzfpay(val){
				if(val==1){
					console.log(this.shopInfo.allpay_client_type);
					if(this.shopInfo.allpay_client_type==1){//1二維碼支付，2綫上支付
						window.open(this.shopInfo.allpay_client_url, '_blank');
					}
				}
				if(val==2){
					if(this.shopInfo.icash_client_type==1){
						window.open(this.shopInfo.icash_client_url, '_blank');
					}
				}
				if(val==3){
					if(this.shopInfo.yypay_client_type==1){
						window.open(this.shopInfo.yypay_client_url, '_blank');
					}
				}
				if(val==4){
					if(this.shopInfo.jkpay_client_type==1){
						window.open(this.shopInfo.jkpay_client_url, '_blank');
					}
					if(this.shopInfo.jkpay_client_type==2){
						this.http.modal('提示', '是否確認選擇當前支付方式?', false, (resp) => {
							if (resp) {
								this.http.request("/api/ordergoods/ordergoodsjkopay", 'POST', {
									order_goods_id: this.listid,
								}).then(res=>{
									if(res.code==1){
										window.open(res.data.payment_url, '_blank');
									}else{
										this.http.toast(res.msg)
									}
								})
							}
						})
					}
				}
				if(val==5){
					if(this.shopInfo.linepay_client_type==1){
						window.open(this.shopInfo.linepay_client_url, '_blank');
					}
					if(this.shopInfo.linepay_client_type==2){
						this.http.modal('提示', '是否確認選擇當前支付方式?', false, (resp) => {
							if (resp) {
								this.http.request("/api/Ordergoods/payment", 'POST', {
									order_goods_id: this.listid,
								}).then(res=>{
									if(res.code==1){
										window.open(res.data.web, '_blank');
									}else{
										this.http.toast(res.msg)
									}
								})
							}
						})
						
					}
				}
			},
			getshopInfo(){
				this.http.request("/api/shop/shop", 'POST', {
					shop_id: this.shop_id,
				}).then(res=>{
					this.shopInfo = res.data
				})
			},
			getzfimg(){
				this.http.request("/api/index/actionpayImage", 'GET', {
				}).then(res=>{
					this.imgall = res.data
				})
			},
			confirm() {
				this.show = false
				if(this.type==2){
					this.addorder()
				}else{
					if(this.type==3){
						this.pzshow = true
					}
					window.open(this.currentitem.lj, '_blank');
				}
			},
			async addorder(){
				let data = {
					paytype_id:this.currentitem.id,
					price:this.price
				}
				let url = "/api/member/rechargePirce"
				let res = await this.http.request(url, 'GET', data)
				if (res.code == 1) {
					window.open(this.currentitem.lj, '_blank');
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			init() {
				let url = "/api/pay/dypaylist"
				let data = {
					shop_id: this.shop_id,
					type: this.tabs
				}
				if(this.type==2){
					url="/api/member/getptdyzf"
					data = {
						type: this.tabs
					}
				}
				this.http.request(url, 'POST', data).then(res => {
					if(res.code==1){
						let arr = [[],[],[],[]]
						res.data.forEach(item=>{
							if(item.type==1){
								arr[0].push(item)
							}
							if(item.type==2){
								arr[1].push(item)
							}
							if(item.type==3){
								arr[2].push(item)
							}
							if(item.type==4){
								arr[3].push(item)
							}
						})
						this.dataList = arr
					}
				})
			},
			seletitem(item) {
				this.currentitem = item
				this.show = true
				this.copy(item.zh)
			},
			xingdongzf(item){
				window.open(item.lj, '_blank');
			},
			change(e) {
				this.tabs = e.id
				this.dataList= []
				this.init()
			},
			copy(value) {
				uni.setClipboardData({
					data: value, //要被複製的内容
					success: () => {
						uni.hideToast();
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-transition{
		z-index: 990 !important;
	}
	.topbgc {
		background-color: #01b901;
		border-radius: 20rpx 20rpx 0 0;
	}

	.payimg {
		width: 100%;
		height: 200rpx;
		border-radius: 30rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 30rpx;
		}
	}

	.textcenter {
		text-align: center;
	}
	.listleftimg1 {
		width: 150rpx;
		min-width: 150rpx;
		height: 150rpx;
		position: relative;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
</style>